<template>
  <Modal v-model="modalVisible" title="存储卷详情" @on-cancel="modalManiCancel" width="1000">
    <div class="modal-card">
      <h4 class="zl-title">存储卷详情</h4>
      <div class="zl-page-loading" v-if="isLoading">
        <Spin fix></Spin>
      </div>
      <div class="modal-item" v-else>
        <Row :gutter="10">
          <Col :span="8">存储卷名称：{{modalForm.id}}</Col>
          <Col :span="8">状态: {{modalForm.phaseStatus === 'Bound' ? '绑定' : '未绑定'}}</Col>
          <Col :span="8">访问模式: {{modalForm.accessModes}}</Col>
          <Col :span="8">请求大小: {{modalForm.storageSize}}</Col>
          <Col :span="8">已用大小: {{modalForm.usedSize}}</Col>
          <Col :span="8">创建时间：{{modalForm.creationTimestamp | parseTime}}</Col>
        </Row>
      </div>

    </div>
    <div slot="footer">
      <Button type="primary" @click="modalManiConf">确定</Button>
    </div>
  </Modal>
</template>
<script type="text/javascript">
import Fetch from '@/api/request'
import { parseTime } from '@/utils'
export default {
  data() {
    return {
      modalForm: {
      },
      modalVisible: false,
      isLoading: true
    }
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    form: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  filters: {
    parseTime(val) {
      return parseTime(val)
    }
  },
  methods: {
    // 获取存储卷详情
    init(id) {
      Fetch.get({
        url: '/api/environments/' + this.$route.params.environmentId + '/persistentvolumeclaims/' + id
      }).then((res) => {
        if (res && res.code === '0') {
          this.modalForm = res.data
        } else {
          this.$Message.warning({
            content: res.message || '服务器内部错误',
            duration: this.DURATION
          })
        }
        this.isLoading = false
      }).catch((err) => {
        this.isLoading = false
        this.$Message.error(err.message)
      })
    },
    // 确定操作
    modalManiConf() {
      this.$emit('update:visible', false)
    },
    // 取消操作
    modalManiCancel() {
      this.$emit('update:visible', false)
    }
  },
  watch: {
    visible(val) {
      this.modalVisible = val
      if (val) {
        this.init(this.form.id)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.modal-card {
  padding: 10px 20px;
  font-size: 14px;
  .zl-title {
    margin-top: 10px;
  }
  .modal-item {
    padding-left: 15px;
  }
  .ivu-col {
    padding-bottom: 8px;
    padding-top: 14px;
  }
}
.zl-page-loading {
  height: 80px;
}
</style>
